<!-- 相当于给模板定义一个名字 define end 成对出现 -->
 {{ define "backstage/login.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天猫商城</title>
    <link rel="shortcut icon" href="/static/images/tianmao.jpg" type="image/x-icon">
    <style>
        .back {
            height: 100vh;           /* 容器高度，例如100%视口高度 */
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center;     /* 垂直居中 */
            position: relative;
            .opt-tip{
                position: absolute; /* 绝对定位 */
                top: 50%; /* 相对于父容器垂直居中 */
                left: 50%; /* 相对于父容器水平居中 */
                transform: translate(-50%, -50%); /* 微调位置以精确居中 */
                z-index: 10; /* 确保悬浮块在主块之上 */
                font-size: 18px;
                border: 1px solid white;
                border-radius: 10px;
                padding: 10px;
                background-color: #ffa54f;
            }

            .sub-form {
                background-color: antiquewhite;
                width: 80vh;
                height: 60vh;
                text-align: center;
                .title {
                    color: rgb(86, 105, 202);
                    margin: 50px 0 50px;
                    text-align: center;
                }
                .need {
                    color: red;
                }
                .err {
                    color: red;
                    margin-top: 10px;
                }
                .btn {
                    background-color: white;
                    border: 1px solid white;
                    cursor: pointer;
                }
                .submit{
                    color: green;
                }
                .reset {
                    color: red;
                    margin-right: 40px;
                }
            }
        }
        input {
            margin-top: 10px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="back">
        <div class="opt-tip" id="tip"></div>
         <div class="sub-form">
            <form style="margin: 20px;" action="/back/doLogin" method="post">
                <div><h1 class="title">天猫商城后台管理系统</h1></div>
                <dl>
                    <dd>
                        <span class="need">*</span>用户名： 
                        <input required type="text" name="userName" id="userName" value="{{.info.Name}}" placeholder="请输入用户名">
                    </dd>
                    <dd>
                        <span class="need">*</span>密码： 
                        <input required type="password" name="password" id="password" value="{{.info.Password}}" placeholder="请输入密码">
                    </dd>
                    <dd>
                        {{if eq .errStatus "1"}}
                            <div class="err">用户名错误！</div>
                        {{else if eq .errStatus "2"}}
                            <div class="err">密码错误！</div>
                        {{end}}
                    </dd>
                    <br>
                    <dd>
                        <input class="btn reset" type="button" value="重置" onclick="resetFun()">
                        <input class="btn submit" type="submit" value="登录">
                    </dd>
                </dl>
            </form>
         </div>
    </div>

    <script>
        init();
        function init(){
            // 初始化操作提示
            let showTag={{.errStatus}};
            let element = document.getElementById("tip");
            if (showTag==3){
                element.style.color="red";
                element.innerText="用户登录已过期";
                setTimeout(() => {
                    element.style.display="none";
                }, 3000);
            } else {
                element.style.display="none";
            }
        }

        function resetFun(){
            document.getElementById('userName').value="";
            document.getElementById('password').value="";
        }
    </script>
</body>
</html>
{{ end }}